<template>
	<div style="position: relative; height: 99.9%">
		<breadcrumb></breadcrumb>
		<div class="Box">
			<div class="header">
				<h2 style="
            font-size: 16px;
            color: #262626;
            font-family: MicrosoftYaHei-Bold;
          ">
					{{ orderId ? "修改订单" : "自行创建订单" }}
				</h2>
			</div>
			<div class="main">
				<!-- 交易信息板块 -->
				<div class="main_item">
					<titleBgVue :title="'货主信息'"></titleBgVue>
					<div class="formItem">
						<el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px"
							class="input_form">
							<el-row style="width: 100%">
								<el-col :span="8">
									<el-form-item label="货源方式" prop="much">
										<el-select size="small" v-model="formData.much" placeholder="请选择">
											<el-option v-for="item in huoyuanArr" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="formData.much == 0">
									<el-form-item label="货源方" prop="ownerId">
										<el-input size="small" :readOnly="true" v-model="transactionForm.huozhu"
											placeholder="请选择货源方">
											<template slot="append">
												<div style="cursor: pointer" @click="Selectcargoe">
													选择货主
												</div>
											</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="formData.much == 0">
									<el-form-item label="项目名称" prop="projectId">
										<el-input size="small" v-model="transactionForm.name" :readOnly="true"
											placeholder="请选择项目">
											<template slot="append">
												<div style="cursor: pointer" @click="Selectitem">
													选择项目
												</div>
											</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="formData.much == 0">
									<el-form-item label="货主单价">
										<el-input size="small" v-model="formData.ownerUnitPrice" placeholder="请输入金额">
											<div slot="suffix" style="padding-right: 10px; padding-left: 10px">
												元
											</div>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="formData.much == 0">
									<el-form-item label="货主金额">
										<el-input size="small" v-model="formData.totalAmount" placeholder="请输入金额">
											<div slot="suffix" style="padding-right: 10px; padding-left: 10px">
												元
											</div>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>

						</el-form>

						<div class="main_item" v-if="formData.much == 1">
							<div class="flxo">
								<button class="addRouteBtn" @click="showAddRouteDialog()">
									<i class="el-icon-plus iconBtn"></i>
									<span>添加货主</span>
								</button>
								<div class="qians">总金额：{{ zongjia }}</div>
							</div>

							<div class="tableBox">
								<el-table :header-cell-style="tableHeaderStyle" :data="formData.orderOwners"
									:row-class-name="rowStyle" ref="multipleTable">
									<el-table-column align="left" prop="" width="50" label="序号">
										<template slot-scope="scope">
											<div>
												{{ scope.$index + 1 }}
											</div>
										</template>
									</el-table-column>
									<el-table-column align="center" label="货主名称" prop="lineName">
										<template slot-scope="scope">
											<div class="addressStyle" style="color: #1890ff"
												@click="Selectcargoe(scope.$index)">
												{{ scope.row.ownerId ? scope.row.ownerName : '请选择货主' }}
											</div>
										</template>
									</el-table-column>
									<el-table-column align="center" label="项目名称" prop="startAddress">
										<template slot-scope="scope">
											<div class="addressStyle" style="color: #1890ff"
												@click="Selectitem(scope.$index)">
												{{ scope.row.projectId ? scope.row.projectName : '请选择项目' }}
											</div>
										</template>
									</el-table-column>
									<el-table-column align="center" label="货主单价" prop="endAddress">
										<template slot-scope="scope">
											<el-input v-model="scope.row.ownerUnitPrice" placeholder="请输入内容"></el-input>
										</template>
									</el-table-column>
									<el-table-column align="center" label="货主金额">
										<template slot-scope="scope">
											<el-input v-model="scope.row.totalAmount" @input="calce"
												placeholder="请输入内容"></el-input>
										</template>
									</el-table-column>
									<el-table-column align="center" label="操作">
										<template slot-scope="scope">
											<el-button type="text" size="small"
												@click="Delet(scope.$index)">删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</div>
				<!-- 交易信息板块 -->
				<div class="main_item">
					<titleBgVue :title="'交易信息'"></titleBgVue>
					<div class="formItem">
						<el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px"
							class="input_form">
							<el-row style="width: 100%">

								<el-col :span="8">
									<el-form-item label="计划名称" prop="ownerProject">
										<el-select size="small" style="position: relative; top: -4px" filterable
											v-model="transactionForm.plan" @change="changePlan" placeholder="请选择">
											<el-option v-for="item in planArr" :key="item.planOrderId"
												:label="item.ownerProject" :value="item.planOrderId">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="计价方式" prop="pricingMethod">
										<el-select size="small" v-model="formData.pricingMethod" placeholder="请选择">
											<el-option v-for="item in jijiaArr" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="计量单位" prop="measureUnit">
										<el-select size="small" v-model="formData.measureUnit" placeholder="请选择"
											@change="changeMeasureUnit">
											<el-option v-for="item in jiliangdawei" :key="item.value"
												:label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<!-- <el-col :span="8">
									<el-form-item label="车队类型" prop="fleetType">
										<el-select size="small" v-model="formData.fleetType" placeholder="请选择"
											@change="changefleettype">
											<el-option v-for="item in chedui" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col> -->
								<el-col :span="8">
									<el-form-item label="运量" prop="cargoWeight">
										<el-input size="small" v-model="formData.cargoWeight"
											placeholder="请输入"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</div>
				<div class="main_item" v-if="type == 2">
					<titleBgVue :title="'订单信息驳回反馈'"></titleBgVue>
					<el-upload class="upload-demo" drag multiple :action="url" :show-file-list="false"
						:headers="headers" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将文件拖到此处，或<em>点击上传</em>
						</div>
					</el-upload>
					<div style="font-size: 15px; color: #3ebbec">{{ suffixName }}</div>
					<div style="width: 400px; margin-top: 15px">
						<el-input type="textarea" :rows="2" placeholder="请输入反馈备注" v-model="remark">
						</el-input>
					</div>
				</div>
				<!-- 收发货信息板块 -->
				<div class="main_item" v-if="type != 2">
					<titleBgVue :title="'收发货信息'"></titleBgVue>
					<div class="formItem">
						<el-form :model="ShippingReceivingInfoForm" :rules="ShippingReceivingInfoRules"
							label-width="117px" class="input_form">
							<el-row>
								<el-col :span="24">
									<el-col :span="8">
										<el-form-item label="选择路线" prop="selection">
											<el-input size="small" :readOnly="true"
												v-model="ShippingReceivingInfoForm.selection" placeholder="请选择路线">
												<template slot="append">
													<div style="cursor: pointer" @click="Selectline">
														选择路线
													</div>
												</template>
											</el-input>
										</el-form-item>
									</el-col>
									<!-- <el-col :span="8">
                      <el-form-item label="距离(公里)" prop="Distance">
                        <el-input v-model="ShippingReceivingInfoForm.Distance" :disabled="true"></el-input>
                      </el-form-item>
                    </el-col> -->
								</el-col>

								<el-col :span="24">
									<el-form-item class="reddian" label="发货地" prop="setOut">
										<!-- 发货地表格 -->
										<el-table :data="start" style="width: 100%; border: 1px solid #f0f0f0"
											:header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
											<el-table-column align="left" prop="" width="50" label="序号">
												<template slot-scope="scope">
													<div>
														{{ scope.$index + 1 }}
													</div>
												</template>
											</el-table-column>
											<el-table-column prop="address" align="center">
												<template slot="header">
													<div class="beforeRedDian">地址</div>
												</template>
												<template slot=""></template>
												<template slot-scope="scope">
													<div @click="AddMap(scope.$index, 0, scope.row.address)">
														<el-input size="small" :readonly="true"
															v-model="scope.row.address" placeholder="请选择地址">
														</el-input>
													</div>
												</template>
											</el-table-column>
											<el-table-column prop="name" label="详细门牌号" align="center">
												<template slot-scope="scope">
													<el-input size="small" v-model="scope.row.detail"
														placeholder="请输入详细门牌号">
													</el-input>
												</template>
											</el-table-column>
											<el-table-column prop="contact" align="center">
												<template slot="header">
													<div class="beforeRedDian">联系人</div>
												</template>
												<template slot-scope="scope">
													<el-input size="small" v-model="scope.row.contact"
														placeholder="请输入联系人">
													</el-input>
												</template>
											</el-table-column>
											<el-table-column prop="phone" align="center">
												<template slot="header">
													<div class="beforeRedDian">联系电话</div>
												</template>
												<template slot-scope="scope">
													<el-input size="small" v-model="scope.row.phone"
														placeholder="请输入联系电话">
													</el-input>
												</template>
											</el-table-column>
											<el-table-column label="操作" align="center">
												<template slot-scope="scope">
													<i class="iconfontcolor icon-a- pointerStyle"
														v-if="scope.$index == 0" @click="addCargo(0)"></i>
													<i class="iconfontcolor icon-a-- pointerStyle"
														@click="DeletCargo(scope.$index, 0)" v-else></i>
												</template>
											</el-table-column>
										</el-table>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item class="reddian" label="目的地" prop="setOut">
										<!--目的地表格 -->
										<el-table :data="end" style="width: 100%; border: 1px solid #f0f0f0"
											:header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
											<el-table-column align="left" prop="" width="50" label="序号">
												<template slot-scope="scope">
													<div>
														{{ scope.$index + 1 }}
													</div>
												</template>
											</el-table-column>
											<el-table-column prop="address" align="center">
												<template slot="header">
													<div class="beforeRedDian">地址</div>
												</template>
												<template slot-scope="scope">
													<div @click="AddMap(scope.$index, 1, scope.row.address)">
														<el-input :readonly="true" v-model="scope.row.address"
															size="small" placeholder="请选择地址">
														</el-input>
													</div>
												</template>
											</el-table-column>
											<el-table-column prop="detail" label="详细门牌号" align="center">
												<template slot-scope="scope">
													<el-input v-model="scope.row.detail" size="small"
														placeholder="请输入详细门牌号">
													</el-input>
												</template>
											</el-table-column>
											<el-table-column prop="contact" align="center">
												<template slot="header">
													<div class="beforeRedDian">联系人</div>
												</template>
												<template slot-scope="scope">
													<el-input v-model="scope.row.contact" size="small"
														placeholder="请输入联系人">
													</el-input>
												</template>
											</el-table-column>
											<el-table-column prop="phone" align="center">
												<template slot="header">
													<div class="beforeRedDian">联系电话</div>
												</template>
												<template slot-scope="scope">
													<el-input v-model="scope.row.phone" size="small"
														placeholder="请输入联系电话">
													</el-input>
												</template>
											</el-table-column>
											<el-table-column prop="phone" label="货物明细" align="center">
												<template slot-scope="scope">
													<div style="font-size: 20px">
														<el-button type="text" size="small"
															@click="cargoVisible(scope.$index)"
															style="font-size: 15px">编辑货物明细</el-button>
													</div>
												</template>
											</el-table-column>
											<el-table-column label="操作" align="center">
												<template slot-scope="scope">
													<i class="iconfontcolor icon-a- pointerStyle"
														v-if="scope.$index == 0" @click="addCargo(1)"></i>
													<i class="iconfontcolor icon-a-- pointerStyle"
														@click="DeletCargo(scope.$index, 1)" v-else></i>
												</template>
											</el-table-column>
										</el-table>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</div>
				<!-- 调度信息板块 -->
				<div class="main_item" v-show="type != 2">
					<titleBgVue :title="'调度信息'"></titleBgVue>
					<div class="formItem">
						<!-- :model="formData"  两个表单 绑定 重赋数据对象 导致表单验证组件不可用 -->
						<el-form :model="formData" :rules="SchedulingRules" ref="SchedulingForm" label-width="117px"
							class="input_form">
							<el-row style="width: 100%">
								<el-col :span="24">
									<el-form-item label="车型" prop="carType" class="carTypeSelect">
										<el-select placeholder="请选择" size="small" v-model="SchedulingForm.carType"
											@change="changeArr">
											<el-option v-for="item in carTypeArr" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
										<div class="carPicBox" v-show="CarData">
											<div class="imgBg">
												<img class="carPic" :src="CarData.image" />
											</div>

											<div class="infoBox">
												<div class="info_item">
													<span class="info_item_tit">载重</span>
													<span class="text">{{ CarData.loads }}吨</span>
												</div>
												<div class="info_item">
													<span class="info_item_tit">长高</span>
													<span class="info_item_tit">{{ CarData.length }}*{{ CarData.height
														}}m</span>
												</div>
												<div class="info_item">
													<span class="info_item_tit">载方</span>
													<span class="text">{{ CarData.capacity }}方</span>
												</div>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<div style="height: 230px" v-show="CarData"></div>
								<el-col :span="8">
									<el-col :span="24">
										<el-form-item label="订单截止时间">
											<el-date-picker v-model="formData.endTime" size="small" type="datetime"
												value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
											</el-date-picker>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="发货时间">
											<el-date-picker v-model="formData.shippedTime" size="small" type="datetime"
												value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"
												:picker-options="pickerOptionsStart">
											</el-date-picker>
										</el-form-item>
									</el-col>
									<el-col :span="24" v-if="formData.fleetType == 2 && formData.allotState == 0">
										<el-form-item label="车队运费" prop="supplierMoney">
											<el-input size="small" v-model="formData.supplierMoney" placeholder="请输入运费">
												<div slot="suffix" style="padding-right: 10px; padding-left: 10px">
													元
												</div>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :span="24" v-if="formData.fleetType == 1">
										<el-form-item label="接单司机" prop="driverId">
											<el-input v-model="transactionForm.Carrier" :clearable="true" size="small"
												@clear="clear" :readOnly="true" placeholder="请选择接单司机">
												<template slot="append">
													<div style="cursor: pointer" @click="SelectAccept">
														选择接单司机
													</div>
												</template>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="司机单价" v-if="formData.fleetType == 1">
											<el-input v-model="formData.unitPrice" placeholder="请输入金额" size="small">
												<div slot="suffix" style="padding-right: 10px; padding-left: 10px">
													元
												</div>
											</el-input>
										</el-form-item>
									</el-col>
								</el-col>
								<el-col :span="8">
									<el-col :span="24">
										<el-form-item label="送达时间">
											<el-date-picker v-model="formData.finishTime" size="small" type="datetime"
												value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"
												:picker-options="pickerOptionsEnd">
											</el-date-picker>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="选择车队" prop="appointSupplierId">
											<el-input v-model="transactionForm.feetName" size="small" :readOnly="true"
												placeholder="请选择接单车队">
												<template slot="append">
													<div style="cursor: pointer" @click="SelectFeet">
														选择接单车队
													</div>
												</template>
											</el-input>
										</el-form-item>
									</el-col>

									<el-col :span="24">
										<el-form-item label="司机运费" v-if="formData.fleetType == 1">
											<el-input size="small" v-model="formData.freight" placeholder="请输入运费">
												<div slot="suffix" style="padding-right: 10px; padding-left: 10px">
													元
												</div>
											</el-input>
										</el-form-item>
									</el-col>

								</el-col>
								<el-col :span="8">
									<el-form-item label="订单备注" prop="beizhu">
										<el-input size="small" type="textarea" resize="none" :rows="6"
											class="notesInput" placeholder="请输入内容" v-model="formData.description"
											maxlength="50" show-word-limit>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="24" v-if="formData.fleetType == 2">
									<el-col :span="24">
										<el-form-item label="是否调度司机" prop="allotState">
											<el-radio-group v-model="formData.allotState">
												<el-radio label="1">是</el-radio>
												<el-radio label="0">否</el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<!-- 调度司机显示 隐藏 -->
										<el-form-item prop="DispatchingDriver">
											<div class="addDriverBox" v-show="formData.allotState == 1">
												<div class="addDriverBox_head">
													<button type="button" class="addDriverBtn"
														@click="showAddDriverDialog()">
														<i class="el-icon-plus iconBtn"></i>
														<span>添加司机</span>
													</button>
													<span style="color: #666666; font-size: 12px">
														该单总运量为<span style="color: #1890ff">{{
															formData.cargoWeight ? formData.cargoWeight : 0
														}}</span>
													</span>
												</div>
												<div class="addDriverTableBox">
													<el-table class="pointDeparture_table"
														:data="SchedulingForm.DispatchingDriver" show-summary
														:header-cell-style="tableHeaderStyle2"
														:row-class-name="rowStyle" :summary-method="getSummaries">
														<el-table-column align="left" prop="" width="50" label="序号">
															<template slot-scope="scope">
																<div>
																	{{ scope.$index + 1 }}
																</div>
															</template>
														</el-table-column>
														<el-table-column align="center" label="司机姓名"
															prop="driverName"></el-table-column>
														<el-table-column align="center" label="车辆信息">
															<template slot-scope="scope">
																<div>
																	{{ scope.row.vehicleInfo }}
																</div>
															</template>
														</el-table-column>
														<el-table-column align="center" label="运量" prop="cargoWeight">
															<template slot-scope="scope">
																<el-input size="small"
																	@change="CalculationResults(scope.row)"
																	v-model="scope.row.cargoWeight">
																</el-input>
															</template>
														</el-table-column>
														<el-table-column align="center" label="单位">
															<template slot-scope="scope">
																<el-select size="small" v-model="scope.row.measureUnit"
																	placeholder="请选择" disabled>
																	<el-option v-for="item in jiliangdawei"
																		:key="item.value" :label="item.label"
																		:value="item.value">
																	</el-option>
																</el-select>
															</template>
														</el-table-column>
														<el-table-column label="司机单价(元)" prop="unitPrice">
															<template slot-scope="scope">
																<el-input size="small"
																	@change="CalculationResults(scope.row)"
																	v-model="scope.row.unitPrice">
																</el-input>
															</template>
														</el-table-column>
														<el-table-column align="center" label="司机运费(元)" prop="freight">
															<template slot-scope="scope">
																<el-input size="small" v-model="scope.row.freight">
																</el-input>
															</template>
														</el-table-column>
														<el-table-column align="center" label="操作">
															<template slot-scope="scope">
																<i class="iconfontcolor icon-a-- pointer"
																	@click="addDispatchDriver(scope.$index)"></i>
															</template>
														</el-table-column>
													</el-table>
												</div>
											</div>
										</el-form-item>
									</el-col>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<div class="footerControlBox">
			<el-button class="cancelBtn" @click="$router.push('/home/selfOperatedOrder/List')">取消</el-button>
			<el-button class="submitBtn" type="primary" @click="submit">提交</el-button>
		</div>

		<!-- 货物明细弹框 -->
		<el-dialog title="编辑货物明细" :visible.sync="cargoDetailsVisible" width="1000px" class="cargoDetails_dialog">
			<div class="head">
				<el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
					:show-file-list="false" accept=".xlsx,.xls" style="width: 150px; display: inline-flex">
					<el-button class="importBtn" type="primary">导入excel文档</el-button>
				</el-upload>
				<el-button class="importBtn1" type="warning" @click="Download">下载excel模板</el-button>
				<el-button class="importBtn1" type="success" @click="AddHuo">添加货物信息</el-button>
			</div>
			<div class="tableBox">
				<el-table class="cargoDetails_table" :data="end[EndIndex].orderCargoDetails"
					:header-row-style="{ height: '40px', backgroundColor: 'red' }"
					:row-style="{ color: '#666666', fontSize: '12px' }">
					<el-table-column align="left" prop="" width="50" label="序号">
						<template slot-scope="scope">
							<div>
								{{ scope.$index + 1 }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="大类">
						<template slot-scope="scope">
							<el-select size="small" v-model="scope.row.cargoType" placeholder="请选择">
								<el-option v-for="item in LargeCategoryArr" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column align="center" label="货物名称">
						<template slot-scope="scope">
							<el-input size="small" v-model="scope.row.cargoName"></el-input>
						</template>
					</el-table-column>
					<el-table-column align="center" label="运量" width="150px">
						<template slot-scope="scope">
							<div style="display: flex">
								<el-input size="small" onkeyup="value=value.replace(/[^\d]/g,'')"
									v-model="scope.row.cargoWeight" style="width: 80px">
								</el-input>
								<el-select size="small" style="width: 70px" v-model="scope.row.measureUnit"
									placeholder="请选择">
									<el-option v-for="item in measureUnitArr" :key="item.value" :label="item.label"
										:value="item.label">
									</el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="品牌">
						<template slot-scope="scope">
							<el-input size="small" v-model="scope.row.brand"></el-input>
						</template>
					</el-table-column>
					<el-table-column align="center" label="规格">
						<template slot-scope="scope">
							<el-input size="small" v-model="scope.row.cargoVolume">
							</el-input>
						</template>
					</el-table-column>
					<el-table-column align="center" label="数量">
						<template slot-scope="scope">
							<el-input size="small" onkeyup="value=value.replace(/[^\d]/g,'')"
								v-model="scope.row.cargoQuantity">
							</el-input>
						</template>
					</el-table-column>
					<el-table-column align="center" label="备注">
						<template slot-scope="scope">
							<el-input size="small" v-model="scope.row.description">
							</el-input>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<i class="iconfontcolor icon-a-- pointerStyle" @click="DeleteIndex(scope.$index)"></i>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="dialog_footer">
				<el-button class="cancelBtn3" @click="cargoDetailsVisible = false">取消</el-button>
				<el-button class="submitBtn3" type="primary" @click="cargoDetailsVisible = false">保存</el-button>
			</div>
		</el-dialog>

		<el-dialog title="货主信息" :visible.sync="DialogVisible" center class="fpkp-dialog">
			<el-row class="flex-fpkp">
				<el-col :md="10" class="ipt-qym">
					<el-input placeholder="请输入货主名" clearable v-model="CargoOwnerValue">
					</el-input>
				</el-col>
				<el-col class="cxbt">
					<el-button type="primary" @click="qyxz('货主信息')">查询</el-button>
				</el-col>
			</el-row>
			<!-- 无数据时显示 -->
			<div class="null-png" v-if="cargoemood.length == 0">
				<div>
					<img src="/null.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
			<el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="cargoemood"
				:header-cell-style="{
					background: '#f5f7fa',
					color: '#606266',
				}" highlight-current-row row-class-name="row-class">
				<el-table-column prop="name" label="货主名称" align="center"></el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作按钮" align="center">
					<template slot-scope="scope">
						<div class="cmd-bt-config">
							<el-button type="primary" style="margin-bottom: 10px"
								@click="cargoeXuan(scope.row)">选择</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
		</el-dialog>

		<el-dialog title="项目信息" :visible.sync="DialogItem" center class="fpkp-dialog">
			<el-row class="flex-fpkp">
				<el-col :md="10" class="ipt-qym">
					<el-input v-model="projectNameValue" placeholder="请输入项目名" clearable>
					</el-input>
				</el-col>
				<el-col class="cxbt">
					<el-button type="primary" @click="qyxz('项目信息')">查询</el-button>
				</el-col>
			</el-row>
			<!-- 无数据时显示 -->
			<div class="null-png" v-if="itemmood.length == 0">
				<div>
					<img src="/null.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
			<el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="itemmood"
				:header-cell-style="{
					background: '#f5f7fa',
					color: '#606266',
				}" highlight-current-row row-class-name="row-class">
				<el-table-column prop="name" label="项目名称" align="center"></el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作按钮" align="center">
					<template slot-scope="scope">
						<div class="cmd-bt-config">
							<el-button type="primary" style="margin-bottom: 10px"
								@click="ItemXuan(scope.row)">选择</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
		</el-dialog>
		<el-dialog title="车队信息" :visible.sync="DialogFleet" center class="fpkp-dialog">
			<el-row class="flex-fpkp">
				<el-col :md="10" class="ipt-qym">
					<el-input v-model="fleetNameValue" placeholder="请输入车队名称" clearable>
					</el-input>
				</el-col>
				<el-col class="cxbt">
					<el-button type="primary" @click="qyxz('车队信息')">查询</el-button>
				</el-col>
			</el-row>
			<!-- 无数据时显示 -->
			<div class="null-png" v-if="DialogAcceptmood.length == 0">
				<div>
					<img src="/null.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
			<el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="DialogAcceptmood"
				:header-cell-style="{
					background: '#f5f7fa',
					color: '#606266',
				}" highlight-current-row row-class-name="row-class">
				<el-table-column prop="fleetName" label="承运方名称" align="center">
					<template slot-scope="scope">
						{{ scope.row.fleetName }}<div v-if="scope.row.index == 2" class="waiFleet">{{ scope.row.index ==
							0 ? '内' : '外'
							}}</div>
					</template>
				</el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作按钮" align="center">
					<template slot-scope="scope">
						<div class="cmd-bt-config">
							<el-button type="primary" style="margin-bottom: 10px"
								@click="AcceptListFleet(scope.row)">选择</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
		</el-dialog>
		<el-dialog title="接单人信息" :visible.sync="DialogAcceptList" center class="fpkp-dialog">
			<el-row class="flex-fpkp">
				<el-col :md="10" class="ipt-qym">
					<el-input v-model="driverNameValue" placeholder="请输入接单人名称" clearable>
					</el-input>
				</el-col>
				<el-col class="cxbt">
					<el-button type="primary" @click="qyxz('接单人信息')">查询</el-button>
				</el-col>
			</el-row>
			<!-- 无数据时显示 -->
			<!-- <div class="null-png" v-if="Acceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div> -->
			<el-table class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Acceptmood"
				:header-cell-style="{
					background: '#f5f7fa',
					color: '#606266',
				}" highlight-current-row row-class-name="row-class">
				<el-table-column prop="driverName" label="接单人名称" align="center"></el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作按钮" align="center">
					<template slot-scope="scope">
						<div class="cmd-bt-config">
							<el-button type="primary" style="margin-bottom: 10px"
								@click="AcceptListXuan(scope.row)">选择</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
		</el-dialog>

		<el-dialog title="选择路线" :visible.sync="DialogLine" center class="fpkp-dialog">
			<!-- 无数据时显示 -->
			<!-- <div class="null-png" v-if="Linemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div> -->
			<div class="controlLine">
				<div class="inputItem">
					<div class="title">路线名称</div>
					<div class="inputBox">
						<el-input v-model="searchLineName" @keyup.enter.native="Selectline">
						</el-input>
					</div>
				</div>
				<el-button type="primary" size="small" icon="el-icon-search" @click="Selectline">查询</el-button>
				<el-button type="plain" size="small" icon="el-icon-refresh-right"
					@click="clearSelectline">清空</el-button>
			</div>
			<el-table class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Linemood"
				:header-cell-style="{
					background: '#f5f7fa',
					color: '#606266',
				}" highlight-current-row row-class-name="row-class">
				<el-table-column prop="lineName" label="名称" align="center"></el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作按钮" align="center">
					<template slot-scope="scope">
						<div class="cmd-bt-config">
							<el-button type="primary" style="margin-bottom: 10px"
								@click="LineXuan(scope.row)">选择</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
		</el-dialog>
		<iframe src="/orderMap.html" ref="iframeTwo" frameborder="0" id="iframetest" width="0" height="0"></iframe>
		<div>
			<el-dialog title="线路信息" :visible.sync="DialogMap" center class="fpkp-dialog">
				<iframe src="/orderMap.html" ref="iframe" frameborder="0" id="iframetest" width="100%"
					height="500"></iframe>
				<div class="dialog_footer" style="width: 100%; display: flex; justify-content: flex-end">
					<el-button class="cancelBtn3" @click="DialogMap = false">取消</el-button>
					<el-button class="submitBtn3" type="primary" @click="serMap">保存</el-button>
				</div>
			</el-dialog>

			<!-- 添加司机弹框 -->
			<el-dialog title="添加司机" :visible.sync="addDriverVisible" width="840px" class="addDriver_dialog">
				<div class="titleBox">
					<div class="title">承运方当前可调动司机：</div>
				</div>
				<el-row class="flex-fpkp">
					<el-col :md="10" class="ipt-qym">
						<el-input v-model="driverNameQuery" placeholder="请输入司机名称" clearable>
						</el-input>
					</el-col>
					<el-col class="cxbt">
						<el-button type="primary" @click="queryDriver()">查询</el-button>
					</el-col>
				</el-row>


				<div class="dialog_list">
					<el-table :data="driverDetailsData" style="width: 100%" header-align="left"
						:row-style="{ color: '#595959', fontSize: '12px' }" ref="registTable">
						<el-table-column align="left" type="selection" width="50"></el-table-column>
						<el-table-column align="left" prop="" width="50" label="序号">
							<template slot-scope="scope">
								<div>
									{{ scope.$index + 1 }}
								</div>
							</template>
						</el-table-column>
						<el-table-column align="left" prop="driverPic" label="司机照片">
							<template slot-scope="scope">
								<div class="driverPicBox">
									<el-image style="width: 65px; height: 48px" :src="scope.row.driverPhoto"
										:preview-src-list="[scope.row.driverPhoto]">
									</el-image>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="left" label="司机姓名">
							<template slot-scope="scope">
								<el-popover placement="bottom-start" width="505" trigger="click" class="popover"
									@show="diverShow(scope.row.driverId)">
									<!-- 司机信息和车辆信息 -->
									<div class="BulletBox" v-if="diverMood">
										<div class="info_item">
											<div class="titleBox">
												<div class="icon-xinxi iconfontcolor"></div>
												<h3 class="title">司机信息</h3>
												<div class="line"></div>
											</div>
											<el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
												color: '#939393',
												fontSize: '12px',
												fontWeight: 'bold',
												marginRight: '20px',
											}" :contentStyle="{
												color: '#262626',
												fontSize: '12px',
											}">
												<el-descriptions-item label="司机姓名">{{
													diverMood.driverName
												}}</el-descriptions-item>
												<el-descriptions-item label="准驾车型">{{
													diverMood.licenseLevel.message
												}}</el-descriptions-item>
												<el-descriptions-item label="身份证号">{{
													diverMood.idCard
												}}</el-descriptions-item>
												<el-descriptions-item label="司机年龄">{{
													scope.row.age
												}}</el-descriptions-item>
											</el-descriptions>
										</div>
										<div class="info_item">
											<div class="titleBox">
												<div class="icon-xinxi iconfontcolor"></div>
												<h3 class="title">车辆信息</h3>
												<div class="line"></div>
											</div>
											<el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
												color: '#939393',
												fontSize: '12px',
												fontWeight: 'bold',
												marginRight: '20px',
											}" :contentStyle="{
												color: '#262626',
												fontSize: '12px',
											}">
												<el-descriptions-item label="车辆类型">{{
													diverMood.vehicleType
												}}</el-descriptions-item>
												<el-descriptions-item label="车牌号">{{
													diverMood.numberplate
												}}</el-descriptions-item>
												<el-descriptions-item label="品牌型号">{{
													diverMood.brandModel
												}}</el-descriptions-item>
												<el-descriptions-item label="规格">{{
													diverMood.specification
												}}</el-descriptions-item>
												<el-descriptions-item label="参数">{{
													diverMood.diverMood
												}}</el-descriptions-item>
											</el-descriptions>
										</div>
									</div>
									<div class="driverNameBox" slot="reference">
										<div class="driverName">{{ scope.row.driverName }}</div>
										<i class="iconfont icon-info"></i>
									</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column align="left" prop="age" label="年龄" width="60">
						</el-table-column>
						<el-table-column align="left" prop="phoneNumber" label="联系电话">
						</el-table-column>
						<el-table-column align="left" prop="numberplate" label="绑定车辆">
						</el-table-column>
						<el-table-column align="left" prop="vehicleType" label="准驾车型" width="80">
						</el-table-column>
					</el-table>
				</div>
				<div class="dialog_footer">
					<el-button class="cancelBtn2" @click="addDriverVisible = false">取 消</el-button>
					<el-button class="submitBtn2" type="primary" @click="driverVerify">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleBgVue from "@/components/titleBg.vue";
import BaseUrl from "@/http/BaseUrl";
import {
	read,
	utils
} from "xlsx";
import store from "@/store/index";
import httpApi from '@/http';
export default {
	data() {
		return {
			suffixName: "",
			url: BaseUrl.UPLOADURL + "/file/upload",
			headers: {
				Authorization: localStorage.getItem("token"),
			},
			driverNameQuery: "",//选择外部车队后添加司机  搜索司机名称
			driverNameValue: "", //接单人信息弹框  司机名称搜索
			projectNameValue: "", //项目信息弹框 输入框项目名称
			CargoOwnerValue: "", //货主信息 搜索货主
			fleetNameValue: "", //车队信息 搜索车队名称
			supplierIdValue: "",
			driverDetailsData: "",
			searchLineName: "", //选择路线弹框 搜索路线名称
			// 发货时间限制  发货时间不大于送达时间
			// <!-- formData.shippedTime  formData.finishTime-->

			pickerOptionsStart: {
				disabledDate: (time) => {
					if (this.formData.finishTime) {
						return (
							time.getTime() < Date.now() - 8.64e7 ||
							time.getTime() >
							new Date(this.formData.finishTime).getTime() -
							1 * 24 * 60 * 60 * 1000
						);
					}
					return time.getTime() < Date.now() - 8.64e7;
				},
			},
			pickerOptionsEnd: {
				disabledDate: (time) => {
					return (
						time.getTime() < Date.now() - 8.64e7 ||
						time.getTime() <
						new Date(this.formData.finishTime).getTime() +
						1 * 24 * 60 * 60 * 1000
					);
				},
			},

			key: "",
			DialogLine: false,
			DialogCar: false,
			DialogMap: false,
			DialogVisible: false,
			DialogItem: false,
			DialogAcceptList: false,
			DialogFleet: false, // 车队弹框
			addDriverVisible: false, //添加司机弹框
			cargoDetailsVisible: false, //货物明细弹框
			cargoemood: [],
			itemmood: [],
			Acceptmood: [],
			DialogAcceptmood: [],
			Linemood: [],
			// 交易信息 表单数据
			transactionForm: {
				huozhu: "",
				name: "",
				jijia: "",
				plan: "",
				jiliang: "",
				yunliang: "",
				danjia: "",
				money: "",
				carrierUunitPrice: "",
				carrierMoney: "",
				feetName: "",
			},
			type: "",
			transactionRules: {
				huozhu: [{
					required: true,
					message: "请点击右侧选择",
					trigger: "blur"
				},],
				name: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
				plan: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
				jijia: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
				jiliang: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
				yunliang: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
				danjia: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
				money: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
				carrierUunitPrice: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				},],
				carrierMoney: [{
					required: true,
					message: "请输入",
					trigger: "blur"
				}],
			},
			// 调度信息 表单数据
			SchedulingForm: {
				overTime: "",
				fahuoTime: "",
				shouHuoTime: "",
				Carrier: "",
				isDispatchingDriver: "1",
				DispatchingDriver: [],
				carType: "",
				beizhu: "",
			},

			//收发货信息
			ShippingReceivingInfoForm: {
				selection: "",
				Distance: "8",
				sendOut: [],
				destination: [],
			},
			ShippingReceivingInfoRules: {},
			// 货物明细
			LargeCategoryArr: [{
				value: 1,
				label: "建材"
			},
			{
				value: 2,
				label: "建材2"
			},
			],
			huoyuanArr: [{
				value: 0,
				label: "单个货源方"
			},
			{
				value: 1,
				label: "多个货源方"
			},
			],
			jiliang: "",
			jiliangArr: [],
			jijia: "",
			jijiaArr: [{
				value: 1,
				label: "按里程"
			},
			{
				value: 2,
				label: "按量"
			},
			],
			jiliangdawei: [{
				value: 1,
				label: "车"
			},
			{
				value: 2,
				label: "吨"
			},
			{
				value: 3,
				label: "件"
			},
			],
			chedui: [{
				value: 1,
				label: "内部车队"
			},
			{
				value: 2,
				label: "外部车队"
			},
			],
			plan: "",
			planArr: [],
			CarrierArr: [],
			carTypeArr: [],
			SchedulingRules: {
				ownerId: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				projectId: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				pricingMethod: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				// ownerProject: [
				//   { required: true, message: "请保持信息完整", trigger: "blur" },
				// ],
				measureUnit: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				cargoWeight: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				unitPrice: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				totalAmount: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				ownerUnitPrice: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				freight: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				endTime: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				finishTime: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				shippedTime: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				driverId: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				appointSupplierId: [{
					required: true,
					message: "请保持信息完整",
					trigger: "change"
				},],
				description: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				categoryId: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				lineId: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				fleetType: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
				supplierMoney: [{
					required: true,
					message: "请保持信息完整",
					trigger: "blur"
				},],
			},
			formData: {
				much: 0,//货源选择方式
				ownerId: "", //货主ID
				projectId: "", //项目ID
				pricingMethod: "", //计价方式
				ownerProject: "", //计划名称
				measureUnit: "", //计量单位
				cargoWeight: "", //运量
				unitPrice: "", //承运方单价
				totalAmount: "", //货主金额
				ownerUnitPrice: "", //货主单价
				freight: "", //承运人金额
				endTime: "", //截止时间
				finishTime: "", //送达时间
				shippedTime: "", //发货时间
				driverId: "", //承运方Id
				description: "", //订单备注描述
				carTypeNeeds: "", //车型需要Id
				lineId: "", //线路ID
				startAddress: [], //发货地
				endAddress: [], //目的地
				appointSupplierId: "", //车队id
				fleetId: "", //车队id
				fleetType: "", //车队类型
				supplierMoney: "",//车队运费
				//调度司机集合
				orderDispatches: [{
					cargoWeight: "", //运量
					driverId: "", //司机Id
					freight: "", //司机运费
					unitPrice: "", //司机单价
				},],
				allotState: "0", //是否调度司机
				orderOwners: []
			},
			creadMood: [],
			CarData: "",
			diverMood: "",
			start: [{
				address: "",
				name: "",
				phone: "",
				lat: "",
				lng: "",
			},],
			end: [{
				address: "",
				name: "",
				phone: "",
				lat: "",
				lng: "",
				orderCargoDetails: [],
			},],
			iframeWin: {}, //Map返回值
			SatrIndex: 0,
			EndIndex: 0,
			compute: false,
			fleetName: "", //车队输入框
			orderId: this.$route.query.id,
			issubmit: false, // 是否提交 用于保存

			measureUnitArr: [{
				label: "车",
				value: "1"
			},
			{
				label: "吨",
				value: "2"
			},
			{
				label: "件",
				value: "3"
			},
			{
				label: "KG",
				value: "4"
			},
			{
				label: "箱",
				value: "5"
			},
			{
				label: "托",
				value: "6"
			},
			{
				label: "台",
				value: "7"
			},
			{
				label: "方",
				value: "8"
			},
			],

			tijiao: "",
			attachment: "",
			remark: "", //反馈备注
			planOrderId: '',
			listIndex: 0,
			zongjia: 0
		};
	},
	created() {
		if (this.$route.query.type) {
			this.type = this.$route.query.type;
		}
		this.cread();
		this.getPlanList()

	},
	methods: {
		calce() {
			let cont = 0
			this.formData.orderOwners.forEach((item, i) => {
				item.totalAmount = item.totalAmount / 1
				cont += item.totalAmount
			});
			this.zongjia = cont
		},
		//删除货主
		Delet(e) {
			this.formData.orderOwners.forEach((item, i) => {
				if (i == e) {
					this.formData.orderOwners.splice(i, 1);
				}
			});
		},
		//添加货主
		showAddRouteDialog() {
			let mood = {
				ownerId: '',
				ownerName: '',
				projectName: '',
				projectId: '',
				totalAmount: '',
				ownerUnitPrice: ''
			}
			this.formData.orderOwners.push(mood)
		},
		changePlan(planOrderId) {
			this.planOrderId = planOrderId
			httpApi.selfOperatedOrderApi.planManagementDetails(planOrderId).then(res1 => {
				this.transactionForm.huozhu = res1.data.data.cargoName;
				this.transactionForm.name = res1.data.data.projectName;
				this.transactionForm.feetName = res1.data.data.fleetName;
				this.ShippingReceivingInfoForm.selection = res1.data.data.lineName;
				this.start = res1.data.data.startAddress;
				this.end = res1.data.data.endAddress;
				for (let k in res1.data.data) {
					this.formData[k] = res1.data.data[k];
				}
				this.formData.orderId = this.orderId;
				// pointTime:'',//时间点
				// weekDay: '',//每周星期几
				// typeDate:'',//每周/每月
				// MonthDate:'',//每月 多少号

				this.formData.typeDate = res1.data.data.weekMonth


				if (this.formData.typeDate == '周') {
					this.formData.weekDay = res1.data.data.weekMonthDate
				} else if (this.formData.typeDate == '月') {
					this.formData.MonthDate = res1.data.data.weekMonthDate
				}
				this.formData.pointTime = res1.data.data.detailTime

				this.creadMood.map((item, index) => {
					if (item.categoryId == this.formData.categoryId) {
						this.SchedulingForm.carType = index;
						this.changeArr(index);
					}
				});

				if (this.formData.orderType == 3) {
					this.formData.fleetType = 2
					if (this.formData.allotState == 1) {
						this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;

					}
				} else {
					this.formData.fleetType = 1
					this.transactionForm.Carrier =
						res1.data.data.orderDispatches[0].driverName;
					this.formData.driverId = this.formData.orderDispatches[0].driverId;
					this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;
				}
			})
		},
		getPlanList() {
			httpApi.selfOperatedOrderApi.planManagementOptions({}).then(res => {
				this.planArr = res.data.data
			})
		},
		handleAvatarSuccess(res, file) {
			this.attachment = res.data.url;
			let index = this.attachment.lastIndexOf(".") + 1;
			this.suffixName =
				"附件." + this.attachment.substring(index, this.attachment.length);
		},
		beforeAvatarUpload(file) { },
		tableHeaderStyle({
			row,
			column,
			rowIndex,
			columnIndex
		}) {
			return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;";
		},
		tableHeaderStyle2({
			row,
			column,
			rowIndex,
			columnIndex
		}) {
			return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F0F6FC;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;";
		},
		rowStyle({
			row,
			rowIndex
		}) {
			return "tableRowStyleName";
		},
		// 计量单位变化时,表格的单位也变化
		changeMeasureUnit(val) {
			this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
				item.measureUnit = this.formData.measureUnit;
			});
		},
		serMap() {
			let dataMap = this.$refs.iframe.contentWindow.ToManualRoamFunc();
			this.DialogMap = false;
			if (this.judgment == 0) {
				for (let k in dataMap) {
					this.start[this.SatrIndex][k] = dataMap[k];
				}
			} else {
				for (let k in dataMap) {
					this.end[this.EndIndex][k] = dataMap[k];
				}
			}
		},
		//添加地址
		AddMap(e, i, z) {
			let that = this;
			if (i == 0) {
				this.SatrIndex = e;
			} else {
				this.EndIndex = e;
			}
			this.judgment = i;
			this.DialogMap = true;
			setTimeout(() => {
				that.$refs.iframe.contentWindow.VueMap(z);
			}, 1000);
		},

		//删除地址
		DeletCargo(e, i) {
			if (i == 0) {
				this.start.forEach((item, i) => {
					if (i == e) {
						this.start.splice(i, 1);
					}
				});
			} else {
				this.end.forEach((item, i) => {
					if (i == e) {
						this.end.splice(i, 1);
					}
				});
			}
		},
		//追加地址数据
		addCargo(e) {
			if (e == 0) {
				this.start.push({
					address: "",
					name: "",
					phone: "",
				});
			} else {
				this.end.push({
					address: "",
					name: "",
					phone: "",
					orderCargoDetails: [],
				});
			}
		},

		//货物明细
		cargoVisible(e) {
			this.EndIndex = e;
			this.cargoDetailsVisible = true;
		},
		//下载模板
		Download() {
			const a = document.createElement("a");
			a.href = "/huowu.xlsx";
			a.download = "huowu.xlsx";
			a.style.display = "none";
			document.body.appendChild(a);
			a.click();
			a.remove();
		},
		//添加货物
		AddHuo() {
			this.end[this.EndIndex].orderCargoDetails.push({
				cargoType: "", //大类
				cargoName: "", //名称
				cargoWeight: "", //运量cargoWeight
				measureUnit: "吨", //运量单位
				brand: "", //品牌
				cargoVolume: "", //规格
				cargoQuantity: "", //货物数量
				description: "", //备注
			});
		},
		//删除货物行
		DeleteIndex(e) {
			this.end[this.EndIndex].orderCargoDetails.forEach((item, i) => {
				if (i == e) {
					this.end[this.EndIndex].orderCargoDetails.splice(i, 1);
				}
			});
		},
		//导入excel文档
		upload(file, fileList) {
			let files = {
				0: file
			};
			this.readExcel1(files);
		},
		//司机详情信息
		async diverShow(e) {
			let res = await this.$http.selfOperatedOrderApi.queryDriverAndVehicleDetail({
				driverId: e,
			});
			this.diverMood = res.data.data;
		},
		// 获取导入excel文档的数据
		readExcel1(files) {
			var that = this;
			////console.log(files);
			// 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改
			// 如果没有文件名
			if (files.length <= 0) {
				return;
			}
			if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
				this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
				return;
			}
			const fileReader = new FileReader();
			fileReader.onload = (ev) => {
				try {
					const data = ev.target.result;
					const workbook = read(data, {
						type: "binary",
					});
					const wsname = workbook.SheetNames[0];
					const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
					let cont = JSON.stringify(ws)
						.replace(/大类/g, "cargoType")
						.replace(/货物名称/g, "cargoName")
						.replace(/运量单位/g, "measureUnit")
						.replace(/运量/g, "cargoWeight")
						.replace(/品牌/g, "brand")
						.replace(/规格/g, "cargoVolume")
						.replace(/数量/g, "cargoQuantity")
						.replace(/备注/g, "description");
					this.end[this.EndIndex].orderCargoDetails = JSON.parse(cont);
				} catch (e) {
					return false;
				}
			};
			fileReader.readAsBinaryString(files[0]);
		},
		clearSelectline() {
			this.searchLineName = "";
			this.Selectline();
		},
		//拿线路信息
		async Selectline() {
			if (this.formData.much == 0) {
				if (!this.transactionForm.huozhu || this.formData.orderOwners[0].ownerId) {
					this.$message.error("请先选择货主");
					return false;
				}
			}
			let res = await this.$http.orderApi.userLineDownList({
				ownerId: this.formData.ownerId || this.formData.orderOwners[0].ownerId,
				lineName: this.searchLineName,
			});
			this.Linemood = res.data.data;
			this.DialogLine = true;
		},
		//选择线路详情
		async LineXuan(e) {
			this.formData.lineId = e.lineId;
			this.ShippingReceivingInfoForm.selection = e.lineName;
			let res = await this.$http.orderApi.userLineAddressList({
				lineId: this.formData.lineId,
			});
			let mood = JSON.parse(JSON.stringify(res.data.data));
			this.start = mood.startAddress;
			this.end = mood.endAddress;
			this.end.forEach((item) => {
				item.orderCargoDetails = [];
			});
			this.end = JSON.parse(JSON.stringify(this.end));
			this.DialogLine = false;
		},

		//拿车型信息
		changeArr(e) {
			this.CarData = this.creadMood[e];
			this.formData.carTypeNeeds = this.creadMood[e].categoryId + "";
		},

		qyxz(val) {
			// 搜索查询
			if (val == "货主信息") {
				this.Selectcargoe(); //货主信息查询
			} else if (val == "接单人信息") {
				this.SelectAccept();
			} else if (val == "项目信息") {
				this.Selectitem(); //项目信息查询
			} else if ((val = "车队信息")) {
				this.SelectFeet();
			}
		},
		//拿货主信息
		async Selectcargoe(e) {
			let res = await this.$http.orderApi.dropDownByOrder({
				name: this.CargoOwnerValue,
			});
			this.cargoemood = res.data.records;
			if (this.formData.much == 1) {
				this.listIndex = e
			}
			this.DialogVisible = true;
		},
		//选择货主
		cargoeXuan(e) {
			if (this.formData.much != 1) {
				this.transactionForm.huozhu = e.name;
				this.formData.ownerId = e.ownerId;
			} else {
				this.formData.orderOwners[this.listIndex].ownerId = e.ownerId
				this.formData.orderOwners[this.listIndex].ownerName = e.name
			}
			this.DialogVisible = false;
			this.CargoOwnerValue = "";
		},

		//拿项目信息
		async Selectitem(e) {
			let ownerId
			if (this.formData.much == 1) {
				this.listIndex = e
				ownerId = this.formData.orderOwners[this.listIndex].ownerId

			} else {
				if (!this.transactionForm.huozhu) {
					this.$message.error("请先选择货主");
					return false;
				}
				ownerId = this.formData.ownerId
			}
			let res = await this.$http.orderApi.project_down({
				ownerId: ownerId,
				name: this.projectNameValue,
			});
			this.itemmood = res.data.records;

			this.DialogItem = true;
		},
		//选择项目
		ItemXuan(e) {
			if (this.formData.much != 1) {
				this.transactionForm.name = e.name;
				this.formData.projectId = e.projectId;
			} else {
				console.log(e.name)
				this.formData.orderOwners[this.listIndex].projectId = e.projectId
				this.formData.orderOwners[this.listIndex].projectName = e.name
			}
			this.DialogItem = false;
			this.projectNameValue = "";
		},
		changefleettype() {
			this.formData.driverId = "";
			this.transactionForm.Carrier = "";
			this.formData.unitPrice = "";
			this.formData.freight = "";
			this.transactionForm.feetName = "";
			this.formData.appointSupplierId = "";
		},
		async SelectFeet() {
			// if (!this.formData.fleetType) {
			// 	this.$message.error("请选择车队类型");
			// 	return;
			// }
			let parmas = {
				fleetName: this.fleetNameValue,
			};
			let res = await this.$http.orderApi.queryAllFleet(parmas);
			let mood = [];
			let cont = res.data.data.nfleet;
			let cont1 = res.data.data.wfleet;
			cont.forEach((item, index) => {
				var d = {
					fleetName: item.fleetName,
					fleetId: item.fleetId,
					index: 1
				}
				mood.push(d)
			})
			cont1.forEach((item, index) => {
				var d1 = {
					fleetName: item.fleet_name,
					fleetId: item.fleet_id,
					index: 2
				}
				mood.push(d1)
			})
			this.DialogAcceptmood = mood;
			this.DialogFleet = true;
		},
		//选择车队
		async AcceptListFleet(e) {
			this.fleetNameValue = "";
			if (e != undefined) {
				this.formData.appointSupplierId = e.fleetId;
				this.formData.driverId = "";
				this.transactionForm.Carrier = "";
				this.formData.unitPrice = "";
				this.formData.freight = "";
			}
			this.formData.fleetType = e.index
			this.transactionForm.feetName = e.fleetName;
			this.DialogFleet = false;
			////console.log(res.data);
		},
		clear() {
			this.formData.driverId = "";
			this.transactionForm.Carrier = "";
			this.formData.unitPrice = "";
			this.formData.freight = "";
		},

		//*接单人信息
		async SelectAccept() {
			if (!this.formData.appointSupplierId) {
				this.$message.error("请选择车队");
				return;
			}
			let parmas = {
				fleetId: this.formData.appointSupplierId,
				driverName: this.driverNameValue,
			};
			let res = await this.$http.orderApi.dropDownDriver(parmas);
			this.Acceptmood = res.data.data;
			this.DialogAcceptList = true;
		},
		AcceptListXuan(e) {
			this.transactionForm.Carrier = e.driverName;
			this.formData.driverId = e.driverId;
			this.DialogAcceptList = false;
			this.driverNameValue = "";
		},
		async queryDriver() {
			let parmas = {
				fleetId: this.formData.appointSupplierId,
				driverName: this.driverNameQuery,
			};
			let res = await this.$http.orderApi.dropDownDriver(parmas);
			this.driverDetailsData = res.data.data;
		},
		//外部司机选择
		async showAddDriverDialog() {
			if (!this.formData.appointSupplierId) {
				this.$message.error("请先选择承运方");
				return false;
			}
			let parmas = {
				fleetId: this.formData.appointSupplierId,
				driverName: this.driverNameValue,
			};
			let res = await this.$http.orderApi.dropDownDriver(parmas);
			this.addDriverVisible = true;
			this.driverDetailsData = res.data.data;
			let that = this;
			setTimeout(() => {
				that.driverDetailsData.forEach((row, i) => {
					that.SchedulingForm.DispatchingDriver.forEach((item, i) => {
						if (row.driverId == item.driverId) {
							that.$refs.registTable.toggleRowSelection(row);
						}
					});
				});
			}, 1000);
		},

		//选择司机确认
		driverVerify() {
			this.addDriverVisible = false;
			this.SchedulingForm.DispatchingDriver = [];
			this.SchedulingForm.DispatchingDriver = this.$refs.registTable.selection;
			this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
				this.SchedulingForm.DispatchingDriver[i].cargoWeight = "";
				this.SchedulingForm.DispatchingDriver[i].freight = "";
				this.SchedulingForm.DispatchingDriver[i].unitPrice = "";
				this.SchedulingForm.DispatchingDriver[i].measureUnit =
					this.formData.measureUnit;
			});
			this.SchedulingForm.DispatchingDriver = JSON.parse(
				JSON.stringify(this.SchedulingForm.DispatchingDriver)
			);
		},

		// 表格合计
		getSummaries(param) {
			const {
				columns,
				data
			} = param;
			const sums = [];

			if (param.columns.length == 0) {
				return;
			}
			// //console.log("param", param);

			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}
				//8列   序号 1列 2 4 7 不参与合计 单元内容返回 return 空显示
				if (index === 1 || index === 2 || index === 4 || index === 7) {
					sums[index] = "";
					return;
				}

				// //console.log("123", column.property);
				// 遍历运量 司机单价 司机运费 字符串转Number
				//遍历列表 转换输入框的值为 Number
				const values = data.map((item) => {
					// //console.log("值", item[column.property]);
					return Number(item[column.property]); //返回 数字 数据 到values数组
				});

				// //console.log("values", values);
				//   every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。
				if (!values.every((value) => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					if (index == 3) {
						// //console.log("运量");
						if (sums[index] > this.formData.cargoWeight) {
							sums[index] = "分配的运量超出总运量";
							this.compute = false;
							return sums;
						} else {
							this.compute = true;
							sums[index] += 0;
							return sums;
						}
					}
					// //console.log(sums[index]);
					sums[index] += " 元";
				} else {
					sums[index] = "N/A";
				}
			});

			return sums;
		},

		// 计算司机金额
		CalculationResults(val) {
			if (val.unitPrice != "" && val.cargoWeight != "") {
				val.freight = val.unitPrice * val.cargoWeight;
			}
		},

		async cread() {
			let res = await this.$http.orderApi.get_vehicle_model_list();
			let mood = res.data.data.homeVehicleModelVoList;
			this.carTypeArr = [];
			this.creadMood = mood;
			mood.forEach((item, i) => {
				this.carTypeArr.push({
					value: i,
					label: item.name
				});
			});
			if (this.orderId) {
				let res1 = await this.$http.orderApi.getAcceptCarriageUpdatedetail({
					orderId: this.$route.query.id,
				});
				this.transactionForm.plan = res1.data.data.ownerProject
				this.planOrderId = res1.data.data.planOrderId
				this.transactionForm.huozhu = res1.data.data.cargoName;
				this.transactionForm.name = res1.data.data.projectName;
				this.transactionForm.feetName = res1.data.data.fleetName;
				this.ShippingReceivingInfoForm.selection = res1.data.data.lineName;
				this.start = res1.data.data.startAddress;
				this.end = res1.data.data.endAddress;
				for (let k in res1.data.data) {
					this.formData[k] = res1.data.data[k];
				}
				this.formData.orderId = this.orderId;
				this.creadMood.map((item, index) => {
					if (item.categoryId == this.formData.categoryId) {
						this.SchedulingForm.carType = index;
						this.changeArr(index);
					}
				});
				if (this.formData.orderType == 3) {
					this.formData.fleetType = 2
					if (this.formData.allotState == 1) {
						this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;
					}
					
				} else {
					this.formData.fleetType = 1
					this.transactionForm.Carrier =
						res1.data.data.orderDispatches[0].driverName;
					this.formData.driverId = this.formData.orderDispatches[0].driverId;
					this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;
				}
				if(this.formData.much==1){
					let cont = 0
					this.formData.orderOwners.forEach((item, i) => {
						item.totalAmount = item.totalAmount / 1
						cont += item.totalAmount
					});
					this.zongjia = cont
				}
			} else {
				if (this.$store.state.orderData) {
					let orderData = this.$store.state.orderData;
					this.formData = orderData.formData;
					this.transactionForm = orderData.transactionForm;
					this.SchedulingForm = orderData.SchedulingForm;
					this.ShippingReceivingInfoForm = orderData.ShippingReceivingInfoForm;
					this.start = orderData.start;
					this.end = orderData.end;
					if (this.formData.carTypeNeeds) {
						this.creadMood.map((item, index) => {
							if (item.categoryId == this.formData.carTypeNeeds) {
								this.SchedulingForm.carType = index;
								this.changeArr(index);
							}
						});
					}
				}
			}
		},
		// 添加调度司机
		addDispatchDriver(e) {
			// 发货地
			this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
				if (i == e) {
					this.SchedulingForm.DispatchingDriver.splice(i, 1);
				}
			});
		},
		deleteDriver(index) {
			this.addRouteForm.destinationPlaceTable.splice(index, 1);
		},

		submit() {
			this.$refs["transactionForm"].validate((valid) => {
				if (valid) {
					this.$refs["SchedulingForm"].validate((valid) => {
						if (valid) {
							// 提交表单
							switch (this.type) {
								case 2:
									let jingao = false;
									this.start.forEach((item) => {
										for (let k in item) {
											if (k == "address" || k == "contact" || k ==
												"phone") {
												//console.log(item[k]);
												if (!item[k]) {
													jingao = true;
												}
											}
										}
									});
									this.end.forEach((item) => {
										for (let k in item) {
											if (k == "address" || k == "contact" || k ==
												"phone") {
												if (!item[k]) {
													jingao = true;
												}
											}
										}
									});
									if (jingao) {
										this.$message.error("请填写完整地址");
										return false;
									}
									break;
							}
							let data = JSON.parse(JSON.stringify(this.formData));
							data.startAddress = JSON.parse(JSON.stringify(this.start));
							data.endAddress = JSON.parse(JSON.stringify(this.end));
							if (this.formData.fleetType == 2) {
								data.fleetId = data.appointSupplierId;
								let cont = [];
								this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
									cont.push({
										driverName: item.driverName,
										vehicleInfo: item.vehicleInfo,
										unitPrice: item.unitPrice,
										measureUnit: item.measureUnit,
										freight: item.freight,
										driverId: item.driverId,
										cargoWeight: item.cargoWeight,
									});
								});
								let dirver = [];
								cont.forEach((item, i) => {
									dirver.push(item.driverId);
								});
								dirver = Array.from(new Set(dirver));
								data.driverId = dirver.join(",");
								if (data.allotState == 1) {
									data.orderDispatches = cont;
								} else {
									data.orderDispatches = [];
									data.allotState = 0;
									data.driverId = "";
									this.compute = true;
								}
							}
							if (this.orderId) {
								data.planOrderId = this.planOrderId
								this.$http.orderApi
									.platformOrderUpdateShipper(data)
									.then((res1) => {
										if (res1.data.code == 200) {
											this.$message.success("修改成功");
											this.issubmit = true;
											this.$router.push("/home/selfOperatedOrder/List");
										}
									});
							} else if (this.type == 2) {
								if ((this.attachment == "") & (this.remark == "")) {
									this.$message.error("驳回编辑后，文件或者备注必传");
									return false;
								}
								let updata = {
									ownerId: "", //货主ID
									projectId: "", //项目ID
									pricingMethod: "", //计价方式
									ownerProject: "", //计划名称
									measureUnit: "", //计量单位
									cargoWeight: "", //运量
									unitPrice: "", //承运方单价
									totalAmount: "", //货主金额
									ownerUnitPrice: "", //货主单价
									supplierMoney: "",//车队运费
									freight: "", //承运人金额
									orderId: this.orderId,
								};
								for (let k in updata) {
									updata[k] = data[k];
								}
								updata.attachment = this.attachment;
								updata.remark = this.remark;
								updata.planOrderId = this.planOrderId

								this.$http.orderApi.platformOrderupdate(updata).then((res3) => {
									if (res3.data.code == 200) {
										this.$message.success("修改成功");
										this.issubmit = true;
										this.$router.push("/home/selfOperatedWaybill/list");
									}
								});
							} else {
								data.planOrderId = this.planOrderId
								this.$http.orderApi.addOrderGoods(data).then((res2) => {
									if (res2.data.code == 200) {
										this.$message.success("提交成功");
										this.issubmit = true;
										this.$store.commit("saveCreateOrder", null);
										this.$router.push("/home/selfOperatedOrder/List");
									}
								});
							}
						} else {
							this.$message.error("请填写调度信息必填项");
							return false;
						}
					});
				} else {
					this.$message.error("请填写交易信息必填项");
					return false;
				}
			});
		},
	},
	mounted() { },
	beforeDestroy() {
		if (this.orderId || this.issubmit) {
			return;
		}
		let orderData = {
			formData: this.formData,
			transactionForm: this.transactionForm,
			SchedulingForm: this.SchedulingForm,
			ShippingReceivingInfoForm: this.ShippingReceivingInfoForm,
			start: this.start,
			end: this.end,
		};
		this.$store.commit("saveCreateOrder", orderData);
	},
	components: {
		breadcrumb,
		titleBgVue,
	},
};
</script>

<style lang="scss" scoped>
.qians {
	color: #409EFF;
	font-size: 15px;
	margin-top: -20px;
	margin-left: 10px;
}

.flxo {
	display: flex;
	align-items: center;
}

.waiFleet {
	width: 20px;
	height: 20px;
	display: inline-block;
	background: #409EFF;
	color: #ffffff;
	line-height: 18px;
	text-align: center;
	border-radius: 20px;
	margin-left: 5px;
}

.controlLine {
	height: 76px;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;

	.inputItem {
		display: flex;
		align-items: center;
		margin-right: 23px;

		>.title {
			color: #262626;
			font-size: 12px;
			margin-right: 7px;
		}

		>.inputBox {
			width: 160px;

			.select {
				::v-deep .el-input__icon {
					line-height: 0;
				}
			}

			::v-deep .el-input__inner {
				height: 32px;
				font-size: 12px;
			}

			::v-deep .el-input__inner::placeholder {
				color: #c3c3c3;
				font-size: 12px;
			}
		}
	}
}

.pointerStyle {
	&:hover {
		transition: 0.2s;
		cursor: pointer;
		opacity: 0.8;
	}
}

.reddian {
	::v-deep .el-form-item__label:before {
		content: "*";
		color: #f56c6c;
		margin-right: 4px;
	}
}

.beforeRedDian:before {
	content: "*";
	color: #f56c6c;
	margin-right: 4px;
}

.Box {
	background-color: #fff;

	.header {
		height: 50px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		padding-left: 24px;
	}

	.main {
		padding: 34px 24px 52px;
		height: calc(100vh - 212px);
		overflow-y: scroll;

		.main_item {
			.titleBox {
				display: flex;
				background-color: #f8f8f8;
				height: 40px;

				.shuxian {
					height: 14px;
					width: 3px;
					background-color: #1890ff;
					margin: 13px 6px 13px 12px;
				}

				.title {
					color: #262626;
					font-size: 13px;
					font-weight: bold;
					line-height: 40px;
				}
			}

			::v-deep .el-form-item__label {
				color: #262626;
				font-size: 12px;
				font-weight: bold;
				// height:32px;
				// line-height: 40px;
			}

			.formItem {
				padding-top: 28px;

				.input_form {
					::v-deep .el-select {
						width: 100%;
					}
				}

				//选择车型
				.carTypeSelect {
					::v-deep .el-select {
						width: 240px;
					}

					// 车辆照片
					.carPicBox {
						position: absolute;
						top: calc(100% + 8px);
						width: 240px;
						height: 161px;
						margin: 0 auto;

						.imgBg {
							background-color: #f5f5f5;
							width: 240px;
							height: 105px;

							.carPic {
								width: 240px;
								height: 105px;
								display: block;
							}
						}

						.infoBox {
							padding-top: 13px;
							border: 1px solid #f0f0f0;
							height: 56px;
							display: flex;
							justify-content: space-around;

							.info_item {
								display: flex;
								flex-direction: column;

								.info_item_tit {
									color: #949494;
									font-size: 12px;
									line-height: 16px;
								}

								.text {
									color: #262626;
									font-size: 12px;
									line-height: 16px;
								}
							}
						}
					}
				}

				// 订单备注
				.notesInput {
					width: 240px;
				}

				.addDriverBox {
					background-color: #f8f8f8;
					width: 100%;
					padding: 0 17px 19px;

					.addDriverBox_head {
						width: 100%;
						height: 57px;
						display: flex;
						align-items: center;

						.addDriverBtn {
							background-color: #1890ff;
							border-radius: 4px;
							height: 32px;
							width: 105px;
							color: #ffffff;
							font-size: 12px;
							padding: 8px 17px 9px 17px;
							transition: 0.2s;
							cursor: pointer;
							margin-right: 17px;

							.iconBtn {
								margin-right: 7px;
								font-size: 15px;
							}

							&:hover {
								opacity: 0.8;
							}
						}
					}
				}
			}
		}
	}
}

.footerControlBox {
	display: flex;
	align-items: center;
	position: absolute;
	z-index: 300;
	bottom: -16px;
	left: -16px;
	justify-content: center;
	height: 60px;
	width: calc(100% + 32px);
	background-color: #fff;
	margin-top: 28px;

	.cancelBtn {
		width: 80px;
		height: 36px;
		border: 1px solid #d9d9d9;
		color: #262626;
		font-size: 12px;
		border-radius: 4px;
		background-color: #fff;
		margin-right: 16px;

		&:hover {
			opacity: 0.8;
			transition: 0.2;
		}
	}

	.submitBtn {
		background-color: #1890ff;
		width: 80px;
		height: 36px;
		color: #fff;
		border-radius: 4px;
		font-size: 12px;
	}

	&:hover {
		opacity: 0.8;
		transition: 0.2;
	}
}

// 添加司机对话框
.addDriver_dialog {
	.dialog_footer {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		height: 80px;
		padding: 20px 0 24px;

		.cancelBtn2 {
			width: 80px;
			height: 36px;
			border: 1px solid #d9d9d9;
			color: #262626;
			font-size: 12px;
			border-radius: 4px;
			background-color: #fff;
			margin-right: 14px;

			&:hover {
				opacity: 0.8;
				transition: 0.2;
			}
		}

		.submitBtn2 {
			background-color: #1890ff;
			width: 80px;
			height: 36px;
			color: #fff;
			border-radius: 4px;
			font-size: 12px;
		}

		&:hover {
			opacity: 0.8;
			transition: 0.2;
		}
	}

	::v-deep .el-dialog__body {
		padding: 31px 40px 24px 40px;
	}

	::v-deep .el-dialog__header {
		border-bottom: 1px solid #f0f0f0;
	}

	.titleBox {
		display: flex;
		margin-bottom: 17px;

		.title {
			color: #262626;
			font-size: 12px;
		}
	}

	.dialog_list {
		border: 1px solid #f0f0f0;
		border-bottom: none;

		.driverPicBox {
			height: 48px;
			width: 65px;
			background-color: #f1f0f0;

			.driverImg {
				height: 48px;
				width: 65px;
			}
		}

		.driverNameBox {
			display: flex;

			.driverName {
				color: #595959;
				font-size: 12px;
				margin-right: 5px;
			}

			.icon-info {
				font-size: 13px;
				color: #595959;
			}
		}

		// 表头样式
		::v-deep .el-table__header th {
			padding: 8px 0;
		}

		::v-deep .el-table__header th {
			background-color: #f5f5f5;
			color: #262626;
			font-size: 12px;
			font-weight: bold;
			text-align: left;

			// 表 body的td
			::v-deep .el-table__body td {
				color: #262626;
				font-size: 12px;
			}
		}

		// 表身体
		::v-deep .el-table__row {
			height: 76px;
		}

		::v-deep .el-table-column--selection .cell {
			padding-left: 16px;
			padding-right: 16px;
		}
	}
}

// 货物明细弹框
.cargoDetails_dialog {
	.head {
		.importBtn {
			margin-bottom: 9px;
			width: 120px;
			height: 36px;
			background-color: #1890ff;
			color: #fff;
			font-size: 12px;

			&:hover {
				opacity: 0.8s;
				transition: 0.2s;
			}
		}
	}

	.dialog_footer {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		height: 80px;
		padding: 20px 0 24px;

		.cancelBtn3 {
			width: 80px;
			height: 36px;
			border: 1px solid #d9d9d9;
			color: #262626;
			font-size: 12px;
			border-radius: 4px;
			background-color: #fff;
			margin-right: 14px;

			&:hover {
				opacity: 0.8;
				transition: 0.2s;
			}
		}

		.submitBtn3 {
			background-color: #1890ff;
			width: 80px;
			height: 36px;
			color: #fff;
			border-radius: 4px;
			font-size: 12px;
		}

		&:hover {
			opacity: 0.8;
			transition: 0.2s;
		}
	}

	::v-deep .el-dialog__body {
		padding: 22px 32px 24px 32px;
	}

	::v-deep .el-dialog__header {
		border-bottom: 1px solid #f0f0f0;
	}

	.cargoDetails_table {
		border: 1px solid #f0f0f0;
		border-bottom: none;
	}
}

.flex-fpkp {
	display: flex;
	margin-bottom: 15px;
}

.cxbt {
	margin-left: 20px;
}
</style>

<style lang="scss">
// 司机信息和车辆信息
.BulletBox {
	padding: 18px 12px;

	>.info_item {
		>.titleBox {
			display: flex;
			align-items: center;
			margin-bottom: 14px;

			>.icon-xinxi {
				font-size: 16px;
				margin-right: 7px;
			}

			>.title {
				color: #262626;
				font-size: 14px;
				margin-right: 14px;
			}

			>.line {
				height: 1px;
				flex: 1;
				background-color: #f0f0f0;
			}
		}
	}
}

.null-png {
	height: 300px;
	width: 100%;
	font-weight: 600;
	display: flex;
	justify-content: center;
}

.null-png div {
	text-align: center;
}

.fpkp-dialog {
	padding-bottom: 30px;
}

.importBtn1 {
	width: 120px;
	font-size: 12px;
}

.addRouteBtn {
	background-color: #1890ff;
	border-radius: 4px;
	height: 32px;
	width: 105px;
	color: #ffffff;
	font-size: 12px;
	padding: 8px 17px 9px 17px;
	transition: 0.2s;
	cursor: pointer;
	margin: 0px 0 16px 0;

	.iconBtn {
		margin-right: 7px;
		font-size: 15px;
	}

	&:hover {
		opacity: 0.8;
	}
}
</style>

<style lang="scss">
.tableRowStyleName {
	color: #262626 !important;
	font-size: 12px;
}
</style>